<template>
  <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-slate-200 mx-auto">
    <header class="text-center mb-6">
      <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-primary mb-2">井字棋</h1>
      <p class="text-neutral text-sm md:text-base">经典的双人对弈游戏</p>
    </header>

    <main>
      <Status />
      <Board />

      <div class="flex flex-col sm:flex-row gap-4 justify-center mb-6">
        <div class="player-card bg-primary/10 rounded-lg p-4 flex-1 text-center border border-primary/20">
          <h2 class="font-semibold text-primary mb-1">玩家 X</h2>
          <div class="text-2xl font-bold">X</div>
          <p class="text-xs text-neutral mt-2">胜利次数: 0</p>
        </div>
        <div class="player-card bg-secondary/10 rounded-lg p-4 flex-1 text-center border border-secondary/20">
          <h2 class="font-semibold text-secondary mb-1">玩家 O</h2>
          <div class="text-2xl font-bold">O</div>
          <p class="text-xs text-neutral mt-2">胜利次数: 0</p>
        </div>
      </div>

      <div class="flex justify-center gap-4">
        <button @click="resetGame" class="bg-accent hover:bg-accent/90 text-white font-medium py-2 px-6 rounded-lg shadow-md btn-hover flex items-center gap-2">
          <i class="fa fa-refresh"></i> 重置游戏
        </button>
        <button @click="newGame" class="bg-dark hover:bg-dark/90 text-white font-medium py-2 px-6 rounded-lg shadow-md btn-hover flex items-center gap-2">
          <i class="fa fa-plus"></i> 新游戏
        </button>
      </div>
    </main>

    <footer class="mt-8 text-center text-xs text-neutral">
      <p>© 2025 井字棋游戏 | 使用 HTML、Vue.js 和 Tailwind CSS 制作</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import Board from './components/Board.vue'
import Status from './components/Status.vue'
import { useGameStore } from './stores/gameStore'

const game = useGameStore()

const resetGame = () => {
  game.resetGame()
}

const newGame = () => {
  game.resetGame()
  // 实际应用中这里可能需要重新初始化游戏ID
}
</script>

<style>
/* 全局样式 */
body {
  background: linear-gradient(to bottom right, #f8fafc, #e2e8f0);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .grid-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .cell {
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-hover {
    transition: all 0.2s ease;
  }
  .btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}
</style>